import React, { useCallback, useEffect, useState } from 'react'
import { Switch, Route, Redirect } from 'react-router-dom';

import $axios from "@/plugins/request"

import { Card, Row, Col, Calendar } from 'antd';

// 引入 ECharts 主模块
import * as echarts from 'echarts';

function Index(props) {

  let [data, setData] = useState([])
  let [data1, setData1] = useState([])

  const getData = useCallback(async () => {
    let { data: res } = await $axios.get("/api/users/getData");
    setData(res.data)
  }, [])
  
  const getData1 = useCallback(async () => {
    let { data: res } = await $axios.get("/api/party/getData");
    setData1(res.data)
  }, [])

  useEffect(() => {
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        left: 'cneter'
      },
      series: [
        {
          name: '角色数据',
          type: 'pie',
          radius: '50%',
          data: data,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    // 绘制图表
    myChart.setOption(option);
  }, [data])

  useEffect(() => {
    var chartDom = document.getElementById('main1');
    var myChart = echarts.init(chartDom);
    var option = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        left: 'cneter'
      },
      series: [
        {
          name: '党员数据',
          type: 'pie',
          radius: '50%',
          data: data1,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    // 绘制图表
    myChart.setOption(option);
  }, [data1])

  useEffect(() => {
    getData();
    getData1();
  }, [])

  function onPanelChange(value, mode) {
    console.log(value, mode);
  }

  return (
    <>
      <Row gutter={20}>
        <Col span={8}>
          <Card title="用户图表" >
            <div id="main" style={{ width: 350, height: 350 }}></div>
          </Card>
        </Col>
        <Col span={8}>
          <Card title="党员图表" >
            <div id="main1" style={{ width: 350, height: 350 }}></div>
          </Card>
        </Col>
        <Col span={8}>
          <Card title="日历">
            <Calendar fullscreen={false} onPanelChange={onPanelChange} />
          </Card>
        </Col>
      </Row>
    </>
  )
}
export default Index;